<template>
	<view>
		<NavBarVue :title="'我的关注和粉丝'"></NavBarVue>
		<div class="head">
			<div class="head_left" v-for="item in list" :key="item.id">
				<div v-if="item.title=='赞和收藏'" @click="toCollect"
					style="width: 50px;height: 50px;background: rgb(255, 223, 222);border-radius: 17px;display: flex;justify-content: center;align-items: center;">
					<span :class="['iconfont',item.icon]" style="color:rgb(253, 94, 91);font-size: 27px;"></span>
				</div>
				<div v-if="item.title=='新增关注'" @click="toNewAttention"
					style="width: 50px;height: 50px;background: rgb(215, 231, 255);border-radius: 17px;display: flex;justify-content: center;align-items: center;">
					<span :class="['iconfont',item.icon]" style="color:rgb(54, 134, 254);font-size: 27px;"></span>
				</div>
				<div v-if="item.title=='评论'" @click="toComment"
					style="width: 50px;height: 50px;background: rgb(214, 247, 234);border-radius: 17px;display: flex;justify-content: center;align-items: center;">
					<span :class="['iconfont',item.icon]" style="color:rgb(50, 217, 151);font-size: 27px;"></span>
				</div>
				<p style="margin-top: 10px;font-size: 15px;">{{item.title}}</p>
			</div>
		</div>
		<ul class="main">
			<li class="main_li" v-for="item in mainlist" :key="item.id">
				<BaseCoverImage :src="item.img" style="width: 40px;height: 40px;border-radius: 25px;" />
				<div class="li_center"
					style="width: 240px;height: 55px;display: flex;flex-direction: column;justify-content:space-evenly;">
					<p style="font-size: 14px;">{{item.title}}</p>
					<div class="li_div">{{item.msg}}</div>
				</div>
				<div style="height: 40px;width: 60px;text-align: center;font-size: 14px;color: #aaa;">
					{{item.time}}
				</div>
			</li>
		</ul>
		<TabBarVue />
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const list = ref([{
			id: 1,
			title: '赞和收藏',
			icon: "icon-xiai",
		},
		{
			id: 2,
			title: '新增关注',
			icon: "icon-morentouxiang",
		},
		{
			id: 3,
			title: '评论',
			icon: "icon-xiaoxi",
		},
	])
	const mainlist = ref([{
			id: 1,
			title: 'hi,小红书助手',
			msg: '小红书成长助手,的哈士奇今晚黑i去问啊快速导航七五恩情五i和',
			time: '07-18',
			img: '/static/images/1002.png'
		},
		{
			id: 2,
			title: '小肥猪',
			msg: '多久吃饭呢',
			time: '07-18',
			img: '/static/images/1003.png'
		},
		{
			id: 3,
			title: '7月的风',
			msg: '你好，查收属于你的的日记',
			time: '07-18',
			img: '/static/images/1004.png'
		},
		{
			id: 4,
			title: '猫咪',
			msg: '该吃饭了',
			time: '07-18',
			img: '/static/images/1005.png'
		},
		{
			id: 5,
			title: '爱吃鱼的小A',
			msg: '大家一起嗨皮',
			time: '07-18',
			img: '/static/images/1006.png'
		},
	])

	const toCollect = () => {
		uni.navigateTo({
			url: '/pages/tab-mine/collect/index'
		})
	}
	const toNewAttention = () => {
		uni.navigateTo({
			url: '/pages/tab-mine/new-attention/index'
		})
	}
	const toComment = () => {
		uni.navigateTo({
			url: '/pages/tab-mine/comment/index'
		})
	}
</script>

<style scoped>
	.head {
		width: 100%;
		height: 130px;
		/* background: salmon; */
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}

	.head_left {
		width: 100px;
		height: 100px;
		/* background: seagreen; */
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.main {
		width: 90%;
		margin: 0 auto;
		/* background: salmon; */
		display: flex;
		flex-direction: column;
		justify-content: center;

	}

	.main_li {
		width: 100%;
		height: 70px;
		/* background: salmon; */
		/* margin-top: 10px; */
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}

	.li_div {
		font-size: 12px;
		color: #aaa;
		white-space: nowrap;
		/*规定段落中的文本不进行换行*/
		overflow: hidden;
		/*内容会被修剪，并且其余内容是不可见的。*/
		text-overflow: ellipsis;
		/*显示省略号来代表被修剪的文本*/
	}
</style>